// 公共表格组件
<template>
  <div class="common-table">

    <!-- 表格展示 开始 -->
    <el-table
      empty-text=" "
      :data="tableData"
      v-bind="tableHeight()"
      ref='table'
      :highlight-current-row="true"
      :row-class-name="rowClassName">
      <!-- 控制选择表格 -->
      <el-table-column
        v-if="operationConfig?operationConfig.select:false"
        type="selection"
        :selectable="ifSelect"
        width="55">
      </el-table-column>

      <el-table-column
        v-for="item in tableLabel"
        :key="item.prop"
        :label="item.label"
        :scoped-slot="renderHeader"
        :width="item.width ? item.width : ''"

      >
        <template slot-scope="scope">
          <!-- 自定义文字背景颜色，字体 -->
          <span
            v-if="item.plus"
            :style="[{marginLeft: `10px`},
              {color: `#FFFFFF`},
              {fontSize:`${item.plus.fontSize}px`},
              {backgroundColor:`${item.plus.backGroundColor[tableData[scope.$index][item.prop]]}`},
              {padding:`${item.plus.padding}px`},
              {borderRadius:`${item.plus.padding*2.5}px`}]"
          >{{ item.codeTable[scope.row[item.prop]] }}</span>

          <!-- 自定义文字对应的码表映射进行映射变化 -->
          <span
            v-else-if="item.codeTable"
            style="margin-left: 10px">{{ item.codeTable[scope.row[item.prop]] }}</span>

          <!-- 自定义可以跳转的事件 -->
          <el-button
            v-else-if="item.prop[0] == '$'"
            type='primary'
            size="mini"
            style="margin-left: 10px"
            class="turn-span"
            @click="turn(item.prop, scope.row)">{{ scope.row[item.prop.slice(1, item.prop.length)] }}
          </el-button>

          <!-- 自定义自增序列 -->
          <span
            v-else-if="item.prop == 'order'"
            style="margin-left: 10px">{{ scope.$index + 1 }}</span>

          <!-- 时间戳装换为年月日 -->
          <span
            v-else-if="item.prop[0] == '@'"
            style="margin-left: 10px">{{ getdateNoTime(scope.row[item.prop.slice(1, item.prop.length)]) }}</span>

          <!-- 可编辑表格字段 -->
          <el-form v-else-if="item.prop[0] == '^'" :model="scope.row">
            <el-form-item size="mini">
              <el-input v-model="scope.row[item.prop.slice(1,item.prop.length)]"></el-input>
            </el-form-item>
          </el-form>

          <!-- 普通表格字段 -->
          <span v-else style="margin-left: 10px">{{ scope.row[item.prop] }}</span>
        </template>
      </el-table-column>

      <!-- 右侧操作栏 -->
      <template v-if="operationList?operationList.length >= 1:false">

        <!-- 将按钮折叠起来 -->
        <el-table-column label="操作"
                         v-if="operationConfig.hidden"
                         :width="operationConfig.width?operationConfig.width + 'px':80+'px'">
          <template slot-scope="scope">
            <el-dropdown @command="handleCommand(scope.row,$event)">
              <span class="el-dropdown-link">操作<i class="el-icon-arrow-down el-icon--right"/></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  :command="item.order"
                  v-for="item in operationList"
                  :key="item.order">
                  {{ item.plus.buttonClass ? item.plus.name[tableData[scope.$index][item.plus.connect]] : item.name }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>

        <!-- 将按钮展开 -->
        <el-table-column label="操作"
                         v-else
                         :width="operationConfig.width?operationConfig.width: operationList.length * 90">
          <template slot-scope="scope">
            <el-button
              size="mini"
              v-for="item in operationList"
              :key="item.order"
              :disabled="item.plus.buttonClass?item.plus.buttonClass[tableData[scope.$index][item.plus.connect]]=='info':false"
              :type="`${item.plus.buttonClass?item.plus.buttonClass[tableData[scope.$index][item.plus.connect]]:item.buttonClass}`"
              @click="handleEvent(item.order, scope.row)"
            >{{ item.plus.buttonClass ? item.plus.name[tableData[scope.$index][item.plus.connect]] : item.name }}
            </el-button>
          </template>
        </el-table-column>
      </template>

    </el-table>
    <!-- 表格展示 结束 -->

    <!-- 分页器 开始 -->
    <el-pagination
      class="pager"
      v-if="paginationConfig?paginationConfig.show:false"
      layout="sizes, prev, pager, next"
      :total="paginationConfig.total"
      :current-page.sync="paginationConfig.page"
      @size-change="handleSizeChange"
      :page-size.sync="paginationConfig.pageSize"
      :page-sizes="[5, 10, 15, 20]"
    ></el-pagination>
    <!-- 分页器 结束 -->
  </div>
</template>

<script>
export default {
  name: 'NormalTable',
  props: {
    tableData: Array,
    paginationConfig: Object,
    operationConfig: Object,
    tableLabel: Array,
    operationList: Array
  },
  data() {
    return {
      value: ''
    }
  },
  methods: {
    getdateNoTime(date) {
      var now = new Date(parseInt(date)),
        y = now.getFullYear(),
        m = now.getMonth() + 1,
        d = now.getDate();
      if (!y || !m || !d) {
        return this.getNowFormatDate()
      }
      return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d)
    },
    //获取当前日期函数
    getNowFormatDate() {
      let date = new Date(),
        year = date.getFullYear(), //获取完整的年份(4位)
        month = date.getMonth() + 1, //获取当前月份(0-11,0代表1月)
        strDate = date.getDate() // 获取当前日(1-31)
      if (month < 10) month = `0${month}` // 如果月份是个位数，在前面补0
      if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0

      return `${year}-${month}-${strDate}`
    },
    ifSelect(row, index) {
      // console.log('select row')
      // console.log(row)
      return true
    },
    // 获取选中的行
    getSelection() {
      return this.$refs.table.selection
    },
    turn(prop, row) {
      this.$emit('turn', prop, row)
    },
    handleCommand(row, command) {
      // console.log(row, command)
      this.handleEvent(command, row)
    },
    handleSizeChange(val) {
      this.paginationConfig.pageSize = val
    },
    handleEvent(order, row) {
      this.$emit('event', order, row)
    },
    rowClassName({row, rowIndex}) {
      row.order = rowIndex + 1;
    },
    // 表头宽度自适应，不换行
    renderHeader(h, {column, $index}) {
      let realWidth = 0;
      let span = document.createElement('span');

      span.innerText = column.label;
      document.body.appendChild(span);

      realWidth = span.getBoundingClientRect().width;
      column.minWidth = realWidth; // 可能还有边距/边框等值，需要根据实际情况加上

      document.body.removeChild(span);
      return h('span', column.label);
    },
    tableHeight() {
      if (this.tableData.length > 10) {
        return {maxHeight: '800'}
      } else {
        return {}
      }
    }

  },
  watch: {
    // 不知道什么原因，不能够直接emit，需要通过watch函数实现效果
    paginationConfig: {
      handler(newVal, oldCal) {
        // console.log(this.paginationConfig.page)
        this.$emit('changePage', this.paginationConfig.page)
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="scss">
// 表格背景阴影
.common-table {
  // box-shadow: 0 0 1px 3px rgba(0, 0, 0, 0.2);
  margin: 10px;
}

// 去除表格头部右边因为隐藏滚动条的空白
.el-table .el-table__fixed-right-patch {
  width: 0px !important;
}

.el-table::before {
  //去除底部白线
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;

}

.turn-span {
  width: 50px;
}

.el-pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-table__body-wrapper::-webkit-scrollbar {
  width: 0;
}

el-table {
  margin-bottom: 40px;
}

.pager {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  // position: absolute;
  // bottom:40px;
  // right: 200px;
}


</style>
